<div style="position: relative;">
  <form class="form-inline protractor-test-rule-details" role="form" name="ruleEditForm.form">
    <div>
      <rule-type-selector class="protractor-test-answer-description" local-value="rule.rule_type" on-selection-change="onSelectNewRuleType">
      </rule-type-selector>
    </div>

    <div>
      <span ng-repeat="item in ruleDescriptionFragments track by $index" class="protractor-test-answer-description-fragment" style="margin-right: 5px; width: 100%;">
        <span ng-if="item.type == 'select'" style="color: black;">
          <span ng-if="ruleDescriptionChoices.length === 1">
            "<[ruleDescriptionChoices[0].val|convertToPlainText|truncate]>"
          </span>
          <span ng-if="ruleDescriptionChoices.length !== 1">
            <select class="form-control" ng-model="rule.inputs[item.varName]" ng-options="choice.id as (choice.val|convertToPlainText|truncate) for choice in ruleDescriptionChoices" style="max-width: 250px;">
            </select>
          </span>
        </span>

        <span ng-if="item.type != 'select' && item.type != 'noneditable'">
          <object-editor obj-type="<[item.type]>" is-editable="isEditable" always-editable="true" value="rule.inputs[item.varName]" style="color: black;"></object-editor>
        </span>
        <span ng-if="item.type == 'noneditable'">
          <[item.text]>
        </span>
      </span>
    </div>
  </form>

  <div class="oppia-rule-save-cancel-buttons" ng-if="isEditingRuleInline()">
    <div class="pull-right">
      <button type="button" class="btn btn-default" ng-click="cancelThisEdit()">Cancel</button>
      <button type="button" class="btn btn-success protractor-test-save-answer" ng-disabled="ruleEditForm.form.$invalid" ng-click="saveThisRule()">Save Answer</button>
    </div>

    <div style="clear: both;"></div>
  </div>
</div>
